<template>
  <div>
    <header class="in-banner bg-orange">
        	<div class="bg-333 hei40">
        		<div class="container">
        			<div class="pull-left mar-t8"><span class="ft-ochre"><a href="#">数字后勤服务大厅</a></span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="ft-grey8"><a href="#">运驾中心</a>&nbsp;&nbsp;-&nbsp;&nbsp;<a href="#">服务监督</a>&nbsp;&nbsp;-&nbsp;&nbsp;<a href="#">网络报修</a></span></div>
        			<!--user login-->
    				<div class="user-box user-txt pull-right mar-t8">
    					<div class="b-login hidden"><!--未登录-->
    					  <i></i>
    					  <a href="#">登录</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;<a href="#">注册</a>
    					</div>
    					<div class="a-login"><!--已登录-->
    					  <i class="on"><img src="../../static/img/temp03.jpg" width="24" height="24" class="img-circle"></i>
    						<a href="#">Chenshangcai</a>
    					</div>
    				</div>
    				<!--/user-->
        		</div>
        	</div>
    		<div class="container hei90">
    			<!--logo-->
    			<div class="logo pull-left mar-t15"></div>
    			<!--search-->
    			<div class="search pull-right mar-t30 mar-l20">
    				<div class="input-group">
    					<input type="text" class="form-control" value="搜索商家/美食">
    					<span class="input-group-btn">
    						<button class="btn" type="button"><img src="../../static/img/search.png" width="18" height="18" alt=""/></button>
    					</span>
    				</div>
    			</div>
    			<!--/search-->
    			<!--.menu-->
    			<div class="pull-right">
    				<nav class="pull-left mar-t30" role="navigation">
    					<ul class="nav-menu nav-menu-tabs">
    						<li class="dropdown">
    							<a href="#" class="dropdown-toggle" data-toggle="dropdown">餐厅介绍</a>
    							<ul class="dropdown-menu">
    								<li><a href="#">桃园食堂</a></li>
    								<li><a href="#">橘园食堂</a></li>
    								<li><a href="#">梅园食堂</a></li>
    								<li><a href="#">杏园食堂</a></li>
    								<li><a href="#">李园食堂</a></li>
    								<li><a href="#">禾丰楼餐厅</a></li>
    								<li><a href="#">楠园一食堂</a></li>
    								<li><a href="#">楠园二食堂</a></li>
    								<li><a href="#">竹园食堂</a></li>
    							</ul>

    						</li>
    						<li><a href="#">推荐菜品</a></li>
    						<li><a href="#">我的订单</a></li>
    					</ul>
    				</nav>
    				<div class="pull-left s-cart mar-t30"><i></i><span class="pull-left">购物车</span> <em>12</em></div>
    			</div>
    			<!--/menu-->
    		</div>
        </header>
        <div class="container1060 mar-t30">
        	<div class="ft18">餐单详情</div>
        	<div class="shopping-cart mar-t10">

    			<div  class="order-list shop-cart-list">
    				<div class="title">
    					<span class="fl ft-bold600 ft16">{{storeName}}</span>
    					<span class="fr"><a href="javascript:;" class="ft12 ft-grey8">返回商家修改</a></span>
    				</div>
    				<p class="clearfix"></p>
    				<ul>
    					<li class="clearfix">
    						<div class="fl na clearfix">商品</div>
    						<div class="fl modify">份数</div>
    						<div class="fr pri" style="width: 80px">小计（元）</div>
    					</li>
    				</ul>
    				<ul class="bg-grey">
    					<li class="clearfix" v-for="item in orderForm.foods">
    						<div class="fl na clearfix" title="精品秘制茄子盖">{{item.foodName}}</div>
    						<div class="fl modify clearfix">
    							<a href="javascript:;" class="fl minus">-</a>
    							<input type="text" class="fl txt-count" v-model="item.count" value="1 " maxlength="2">
    							<a href="javascript:;" class="fl plus">+</a>
    						</div>
    						<div class="fr pri"><span>¥{{item.price}}</span></div>
    					</li>
<!--    					<li class="clearfix">-->
<!--    						<div class="fl na clearfix" title="精品秘制茄子盖">精品秘制茄子盖</div>-->
<!--    						<div class="fl modify clearfix">-->
<!--    							<a href="javascript:;" class="fl minus">-</a>-->
<!--    							<input type="text" class="fl txt-count" value="1 " maxlength="2">-->
<!--    							<a href="javascript:;" class="fl plus">+</a>-->
<!--    						</div>-->
<!--    						<div class="fr pri"><span>¥16</span></div>-->
<!--    					</li>-->
    				</ul>
    				<div class="other-charge">
    					<div class="clearfix packing-cost">
    					  <span class="fl">包装盒</span>
    					  <span class="fr boxtotalprice">¥{{packCost}}</span>
    					</div>
    					<div class="clearfix delivery-cost">
    					  <span class="fl">配送费(不计入起送价)</span>
    					  <span class="fr shippingfee">¥{{deliveryCost}}</span>
    					</div>
    				</div>

    				<div class="privilege hidden"></div>
    				<div class="total">共<span class="totalnumber">{{orderForm.foods.length}}</span>份，共计<span class="bill fr">¥{{orderForm.price}}</span></div>
    			</div>
    			<!--收货地址-->
    		  	<div class="bg-white pad20 mar-t8">
      		  		<!--默认无-->
      		  		<div class="hidden">
      		  			<span class="fl ft-bold600 ft16">收货地址</span>
    	  			  	<button type="button" @click="updateFlag=true" class="ft-grey8 ft16 btn-add bg-grey mar-t8"><img src="../../static/img/icon05.png" width="22" height="22" alt=""/> 添加新地址</button>
      		  	  	</div>
      		  		<!--收货地址List-->
    				<div>
    					<span class="fl ft-bold600 ft16">收货地址</span>
    					<a  @click="updateFlag=true" class="fr ft-grey8" data-toggle="modal" data-target="#myModal"><img src="../../static/img/icon05.png" width="22" height="22" alt=""/> 添加新地址</a>
    					<p class="clearfix"></p>
    					<div @click="selAddress(item)" :class="addressItem.id==item.id?'addr-list mar-t8 bg-grey on':'addr-list mar-t8 bg-grey'" v-for="item in addressItems">
    						<i></i>
    						<span class="fl">{{item.consignee}}： {{item.phone}}</span>
    						<span class="fr txt ft-orange"><a @click="updateAddress(item)">修改</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">删除</a></span>
    						<p class="clearfix"></p>
    						<p class=" line01 pad-t5">{{item.address}}</p>
    					</div>
<!--    					<div class="addr-list mar-t8 bg-grey">-->
<!--    						<i></i>-->
<!--    						<span class="fl">陈 女士 ： 15023633003</span>-->
<!--    						<span class="fr txt ft-orange"><a href="#">修改</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">删除</a></span>-->
<!--    						<p class="clearfix"></p>-->
<!--    						<p class=" line01 pad-t5">冯时行路290号 大正研发11楼</p>-->
<!--    					</div>-->
<!--    					<div id="demo" class="collapse">-->
<!--    						<div class="addr-list mar-t8 bg-grey">-->
<!--    							<i></i>-->
<!--    							<span class="fl">陈 女士 ： 15023633003</span>-->
<!--    							<span class="fr txt ft-orange"><a href="#">修改</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">删除</a></span>-->
<!--    							<p class="clearfix"></p>-->
<!--    							<p class=" line01 pad-t5">冯时行路290号 大正研发11楼</p>-->
<!--    						</div>-->
<!--    						<div class="addr-list mar-t8 bg-grey">-->
<!--    							<i></i>-->
<!--    							<span class="fl">陈 女士 ： 15023633003</span>-->
<!--    							<span class="fr txt ft-orange"><a href="#">修改</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#">删除</a></span>-->
<!--    							<p class="clearfix"></p>-->
<!--    							<p class=" line01 pad-t5">冯时行路290号 大正研发11楼</p>-->
<!--    						</div>-->
<!--    					</div>-->
<!--    					<div class="ft12 bg-grey btn-fold center-block" data-toggle="collapse" data-target="#demo">-->
<!--    					  	<p class="icon-down">显示更多地址&nbsp;&nbsp;<img src="../../static/img/icon-up01.png" width="9" height="6" alt=""/></p>-->
<!--    						<p class="icon-up" style="display: none">收起&nbsp;&nbsp;<img src="../../static/img/icon-down.png" width="9" height="6" alt=""/></p>-->
<!--    					</div>-->
    				</div>
    			</div>
    			<!--付款方式-->
    			<div class="bg-white pad20 mar-t8">
    				<p class="ft-bold600 ft16 fl mar-r3">请选择支付方式</p>
    				<p class="fl ft-grey8 mar-t8">剩余支付时间 <span class="ft-orange">12分19秒</span> 逾期订单将自动取消</p>
    				<p class="clearfix"></p>
    				<p class="mar-t10"></p>
    				<div class="addr-list mar-t8 bg-grey fl mar-r3 on" style="width: 150px">
    					<i></i>
    					<img src="../../static/img/pay-img01.png" width="46" height="45" alt=""/>&nbsp;&nbsp;&nbsp;&nbsp;支付宝
    				</div>
    				<div class="addr-list mar-t8 bg-grey fl mar-r3" style="width: 170px">
    					<i></i>
    					<img src="../../static/img/pay-img02.png" width="50" height="45" alt=""/>&nbsp;&nbsp;&nbsp;&nbsp;微信支付
    				</div>
    		  	  	<div class="addr-list mar-t8 bg-grey fl" style="width: 180px">
    					<i></i>
    					<img src="../../static/img/pay-img03.png" width="45" height="45" alt=""/>&nbsp;&nbsp;&nbsp;&nbsp;校园一卡通
    				</div>
    				<p class="clearfix"></p>
    			</div>
    			<!--其他信息-->
    			<div class="bg-white pad20 mar-t1">
    				<p class="ft-bold600 ft16">其他信息</p>
    				<p class="mar-t10"><span class="ft-grey8">配送方式</span>&nbsp;&nbsp;本订单由&nbsp;<span class="ft-orange">西南大学 膳食中心</span>&nbsp;提供配送</p>
    				<p class="mar-t10"><span class="ft-grey8">订单备注</span>&nbsp;&nbsp;<input type="text" class="form-control" v-model="remarks"  placeholder="不要辣，多放盐等口味要求" style="display: inline-table; width: 300px;">&nbsp;&nbsp;&nbsp;&nbsp;<span class="ft-grey9">如：别放辣 | 辣一点 | 米饭多一点 | 没零钱 | 快点送 | 别放香菜</span></p>
    			</div>
    			<div class="bg-grey pad10-20 mar-t1">
    				<span class="ft-grey8">期望送达时间：</span>&nbsp;&nbsp;
    				<select class="form-control" style="display: inline-table; width: 120px;">
    					<option>立即送出</option>
    					<option>2</option>
    					<option>3</option>
    					<option>4</option>
    					<option>5</option>
    				</select>&nbsp;&nbsp;&nbsp;&nbsp;
    				<span class="ft-grey9">请避开高峰期</span>
    			</div>

    			<p class="mar-t10"></p>
    			<div class="footer wid300 pull-right">
    				<div class="fl">
    					<div class="logo icon"></div>
    					<div class="brief-order">
    						<span class="count">2</span>
    						<span class="price"><i>¥</i>33</span>
    					</div>
    				</div>
    				<div class="fr">
    					<input class="go-pay borderradius-2" type="submit" @click="pay" value="立即下单" style="display: inline-block;">
    					<input type="hidden" class="order-data" name="shop_cart">
    				</div>
    			</div>
    			<p class="clearfix"></p>
    	  </div>
       	  	<p class="hei50">&nbsp;</p>
        	<!--footer-->
        	<footer class="line text-center ft-grey6 ft12">
        		<p class="mar-t10 mar-b20">版权所有：西南大学资产经营公司 (渝ICP 06005063号)    重庆市北碚区天生路2号    邮编：400715 </p>
        	</footer>
    	</div>
    <el-dialog
      title="新增"
      :visible.sync="updateFlag"
      width="30%"
      @close="handleClose"
      >
      <span>
        <el-form ref="form"  label-width="80px">
  <el-form-item label="收货人">
    <el-input v-model="addressForm.consignee" ></el-input>
  </el-form-item>
          <el-form-item  label="手机号">
    <el-input v-model="addressForm.phone" ></el-input>
  </el-form-item>
          <el-form-item label="收货地址">
    <el-input v-model="addressForm.address" ></el-input>
  </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="updateFlag = false">取 消</el-button>
    <el-button type="primary" @click="addAddress">确 定</el-button>
    </span>
    </el-dialog>

    <el-dialog
      title="修改"
      :visible.sync="changeFlag"
      width="30%"
      @close="handleClose"
    >
      <span>
        <el-form ref="form"  label-width="80px">
  <el-form-item label="收货人">
    <el-input v-model="addressForm.consignee" ></el-input>
  </el-form-item>
          <el-form-item  label="手机号">
    <el-input v-model="addressForm.phone" ></el-input>
  </el-form-item>
          <el-form-item label="收货地址">
    <el-input v-model="addressForm.address" ></el-input>
  </el-form-item>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="changeFlag= false">取 消</el-button>
    <el-button type="primary" @click="addAddress">确 定</el-button>
    </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
    name: "Shopping_payment",
    data(){
      return {
        packCost:"",
        deliveryCost:"",
        remarks:"",
        storeName:"",
        changeFlag:false,
        changeForm:{
          id:"",
          consignee:"",
          phone:"",
          address:""
        },
        addressForm:{
          consignee:"",
          phone:"",
          address:"",
        },
        updateFlag:false,
        orderForm:{
          storeId:"1",
          price:"1",
          orderPhone:"1",
          receiveName:"1",
          address:"1",
          payType:"1",
          remarks:"2",
          foods:[
            {
              foodId:"2",
              foodName:"2",
              count:"2",
              price:"2"
            }
          ]
        },
        //所有地址数组
        addressItems:[],
        //地址对象
        addressItem:""
      }
    },
    methods: {
      selAddress(item){
        this.addressItem=item;
      },
      handleClose(){
        this.addressForm={
          consignee:"",
          phone:"",
          address:""
        };
      },
      pay() {
        this.orderForm.orderPhone=this.addressItem.phone;
        this.orderForm.receiveName=this.addressItem.consignee;
        this.orderForm.payType=1;
        this.orderForm.address=this.addressItem.address;
        this.orderForm.remarks=this.remarks;
        this.$http.post("/dietOrder/addOrder", this.orderForm
        ).then(resp => {
          console.log(resp)
          document.write(resp.data.data);
        })
      },
      //查询当前用户所有收货地址
      findAddress(uid){
        this.$http.get("/addressInfo/findAddress",uid).then(resp=>{
          this.addressItems=resp.data.data;
          if(resp.data.data.length>0){
            this.addressItem=this.addressItems[0];
          }

        })
      },
      //新增收货地址
      addAddress(){

        this.$http.post("/addressInfo/addAddress",this.addressForm).then(resp=>{
          if(resp.data.code==200){
            this.$message({
              showClose: true,
              message: resp.data.message,
              type: 'success'
            });
            this.updateFlag=false;
            this.findAddress()
          }
        })
      }
      // //修改地址
      // updateAddress(item){
      //   this.changeForm.id=item.id;
      //   this.$http.post("/addressInfo/updateAddress",this.changeForm).then(resp=>{
      //     console.log(resp)
      //   })
      // },
      // //删除地址
      // delAddress(id){
      //   this.$http.post("/addressInfo/delAddress",id).then(resp=>{
      //     alert(1)
      //     console.log(resp)
      //   })
      // }
    },
  //预加载
    created() {
      this.packCost=this.$route.query.packCost;
      this.deliveryCost=this.$route.query.deliveryCost;
      this.storeName=this.$route.query.storeName;
      this.orderForm=this.$route.query.orderForm;
      this.findAddress();
    }
}
</script>

<style scoped>

</style>

